<template>
  <div class="account-center">
    <div class="left-box f-cb">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="AccountHandle"
      >
        <el-tab-pane :label="$t('m.hkStock')" name="first"
          ><!-- 港股 AccountType = 2 --></el-tab-pane
        >
        <el-tab-pane :label="$t('m.usStock')" name="second"
          ><!-- 美股  AccountType = 3--></el-tab-pane
        >
        <el-tab-pane :label="$t('account.account_data.56hps56w8dg0')" name="third"
          ><!-- A股通 AccountType = 1 --></el-tab-pane
        >
      </el-tabs>
      <div v-if="assetType == 1" @click="openDialog" class="up_account">
        <img class="up_account_img" src="@/assets/img/icon_sj.png" alt="" />
        <span class="up_account_font">{{ $t('account.account_center.56hzuwb8jeo0') }}</span>
      </div>
      <AccountData
        :data="Stockasset"
        :type="AccountType"
        @clicks="CapitalFlowClick(AccountType)"
      ></AccountData>
      <AccountTable
        ref="accountList"
        :StockList="StockList"
        :type="AccountType"
        @Accountclicks="Accountclicks(AccountType)"
      ></AccountTable>
    </div>
    <div class="right-box f-cb">
      <AccountRight
        :StockData="StockData"
        :SearchShowIs="SearchShowIs"
      ></AccountRight>
    </div>
    <!-- 升级融资账户对话框 -->
    <AccountUp
      ref="accountUp"
      :show="isUpAccount"
      :amount="amount"
      :type="AccountType"
      @closeUp="closeUp"
    ></AccountUp>
  </div>
</template>

<script>
import {get_securities} from '@/assets/js/API/order.js';
import AccountData from "@/components/account_dialog/AccountData.vue";
import AccountTable from "@/components/account/table/AccountTable.vue";
import AccountRight from "@/components/account/right/AccountRight.vue";
import AccountUp from "@/components/account_dialog/AccountUp.vue";
export default {
  components: {
    AccountData,
    AccountTable,
    AccountRight,
    AccountUp,
  },
  data() {
    return {
      activeName: "first",
      Account_data: {},
      StockType: 1,
      StockData: {},
      SearchShowIs: true,
      StockList: {},
      Stockasset: {},
      AccountType: 2,
      isUpAccount: false, // 升级账户对话框
      amount: null, //账户余额
    };
  },
  mounted() {
    //港股
    // 若是交易后需跳转到当前委托表单，否则当前持仓表单
    if (this.listenTrade.type != 0) {
      this.changeToPosition(this.listenTrade);
    } else this.GetSecuritiesAccount(2, "Hkasset", "HkList");
  },
  methods: {
    handleClick(tab, event) {
      if (Number(tab.index) == 0) {
        this.AccountType = 2;
      } else if (Number(tab.index) == 1) {
        this.AccountType = 3;
      } else {
        this.AccountType = 1;
      }
      this.$store.dispatch("SetAccountType", this.AccountType);
      this.Accountclicks(this.AccountType);
    },
    // 关闭账号升级对话框
    closeUp() {
      this.isUpAccount = false;
    },
    // 打开账号升级兑换框
    openDialog() {
      this.isUpAccount = true;
      this.amount = this.Stockasset.totalAsset;
      this.$refs.accountUp.getInfo();
      this.$refs.accountUp.getTotalAccount();
    },
    Accountclicks(AccountType) {
      if (AccountType == 2) {
        this.GetSecuritiesAccount(2, "Hkasset", "HkList");
      } else if (AccountType == 3) {
        this.GetSecuritiesAccount(3, "Usasset", "UsList");
      } else {
        this.GetSecuritiesAccount(1, "Shasset", "ShList");
      }
    },
    //获取总资产
    GetSecuritiesAccount(type, asset, list) {
      var _this = this;
        get_securities({ type: type }).then(function (res) {
          if (res.code == 1) {
            _this.Stockasset = res.data.asset;
            _this.StockList = res.data;
          } else {
            _this.$message({
              message: response.data.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 交易完成后跳转委托管理
    async changeToPosition(val) {
      if (val.type != 0) {
        if (val.type == 1) {
          await this.GetSecuritiesAccount(1, "Shasset", "ShList");
          this.activeName = "third";
        } else if (val.type == 3) {
          await this.GetSecuritiesAccount(3, "Usasset", "UsList");
          this.activeName = "second";
        } else {
          await this.GetSecuritiesAccount(2, "Hkasset", "HkList");
          this.activeName = "first";
        }
        this.$refs.accountList.ActiveTitleList = 2;
        this.AccountType = val.type;
      }
    },
  },
  computed: {
    assetType() {
      return this.$store.state.index.assetType;
    },
    listenTrade() {
      return this.$store.state.index.listenTrade;
    },
  },
  watch: {
    "$store.state.index.listenTrade": {
      handler(val, old) {
        if (val.flag != old.flag) {
          this.changeToPosition(val);
        }
      },
    },
  },
};
</script>

<style lang="less">
.account-center {
  background: @deepBg;
  height: 100%;
  display: flex;
  width: calc(100vw - 60px);
  flex-direction: row;
  .right-box {
    width: 380px;
    height: 100%;
    overflow: auto;
    border-left: 2px solid @DarkBorderLine;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .left-box {
    height: 100%;
    width: calc(100% - 380px);
    overflow: auto;
  }
}
.AccountHandle {
  .el-tabs__header {
    margin-bottom: 0;
    .el-tabs__item {
      font-size: 12px;
      color: @fbSix;
      padding: 0 20px;
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }
    .el-tabs__item.is-active {
      color: @hoverColor;
    }
    .el-tabs__active-bar {
      background-color: @hoverColor;
    }
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
    background: @LightBorderLine;
  }
}
.up_account {
  position: absolute;
  // color: @hoverColor;
  top: 60px;
  right: 400px;
  cursor: pointer;
  .up_account_img {
    height: 16px;
    margin-right: 4px;
  }
  .up_account_font {
    color: @fbSix;
    font-size: 12px;
    line-height: 24px;
  }
}
</style>